<script lang="ts" setup>
	import {
		useRouter
	} from 'uni-mini-router'
	import jobCard from "@/components/job-card.vue"
	import { onLoad ,onShow} from '@dcloudio/uni-app';
	import { reactive, ref ,getCurrentInstance} from "vue";
	const {proxy} = getCurrentInstance()
	const router = useRouter()
	let latitude = ref(39.909)
	let longitude = ref(116.39742)
	let covers = ref([
		{
			latitude: 38.99139,
			longitude: 121.593086,
			title: 'New York City',
			iconPath: '../../../logo.png',
			// #ifdef APP-PLUS
	
			// #endif
			// #ifndef APP-PLUS
			// iconPath: '../../../static/location.png',
			// #endif
		}
		// , {
		// 	latitude: 39.90,
		// 	longitude: 116.39,
		// 	// #ifdef APP-PLUS
		// 	iconPath: '../../../static/app-plus/location@3x.png',
		// 	// #endif
		// 	// #ifndef APP-PLUS
		// 	// iconPath: '../../../static/location.png',
		// 	// #endif
		// }
	])
	let tabsList = ref([{
		name: '关于'
	}, {
		name: '职位'
	}])
	const tabName = ref('关于')
	const clickTabs = (e) => {
		tabName.value = e.name
		console.log(state.detailsData ,'state.detailsData')
	}
	let con = ref('')
	let showOther = ref(false)
	let cutBtn = ()=>{
		showOther.value = !showOther.value
	}
	let companyId = ref('')
	let pageType = ref('')
	let state = reactive({
		detailsData:{},
		list:[],
		total:0,
		pageNo: 1,
		pageSize: 10,
		
	})
	onLoad((options) => {
		companyId.value = options.companyId
		pageType.value = options.type || ''
		getCompanyDetail()
		getMeiyeRecruitJob2List()
	})
	onShow(()=>{
		getCompanyDetail()
	})
	const getMap =(e) => {
		
		uni.request({
			url: 'https://apis.map.qq.com/ws/geocoder/v1/',//腾讯官方逆解析接口，可直接复制
				data: {
	
				'address':e,
				'key': "O6DBZ-CGPCZ-HM2XW-T2J45-NJRN3-YMB6J",//自己申请的Key
				},
				method: "GET",
				success(res) {
					console.log(res,'解析成功返回的参数');
					console.log(res.data.result.location.lat,'解析成功返回的参数lat');
					console.log(res.data.result.location.lng,'解析成功返回的参数lng');
					
					latitude.value = res.data.result.location.lat
					longitude.value = res.data.result.location.lng
					
					console.log(latitude.value)
				}
			})
							
	
		
	}
	
	const getCompanyDetail = () => {
		//获取详情
		// companyId.value
		proxy.$req('GET', proxy.$api.meiyeCompany2Details, {
			id:companyId.value,
		}).then((res) => {
			if(res.code === 200){
				state.detailsData = res.result
				con.value = res.result.info	
				console.log(res.result)
				getMap(res.result.address)
			}
		})
	}
	// 获取职位
	const getMeiyeRecruitJob2List = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.getMeiyeRecruitJob2List, {
			companyId:companyId.value,
			pageNo: 1,
			pageSize: 100,
		}).then((res) => {
			if(res.code === 200){
				state.list = res.result.records
				
			}
		})
	}
	
	const setBackGround = (e)=>{
		return {
			'backgroundImage':`url(${e})`
		}
	}
	const back = () => {
		router.back()
	}
	const editFun = ()=>{
		router.push({
			name:'companyEdit',
			params:{
				companyId:companyId.value,
				type:pageType.value
			}
		})
	}
	
	// onReachBottom(() => {
	// 	if (state.total > state.list.length) {
	// 		state.pageNo++
	// 		getMeiyeRecruitJob2List()
	// 	}
	// })
	
	// const toMap =()=>{
		
	// 	uni.chooseLocation({
	// 	    success: function (res) {
	// 	        console.log('位置名称：' + res.name);
	// 	        console.log('详细地址：' + res.address);
	// 	        console.log('纬度：' + res.latitude);
	// 	        console.log('经度：' + res.longitude);
	// 	    }
	// 	});
	// 	// let arr = marketType.value.map((item) => {
	// 	// 	return item.name
	// 	// })
	// 	// // console.log(marketType.value);
	// 	// uni.showActionSheet({
	// 	// 	itemList: arr,
	// 	// 	success: function (res) {
	// 	// 		form.value.type = arr[res.tapIndex]
	// 	// 		form.value.typeId = marketType.value[res.tapIndex].id
	// 	// 	},
	// 	// 	fail: function (res) {
	// 	// 		// console.log(res.errMsg);
	// 	// 	}
	// 	// });
	// }
		const chooseLocation = ()=>{
				uni.chooseLocation({
					success: res => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						uni.getLocation({
							type: 'gcj02',
							altitude:true,
							geocode:true,
							success: function(res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
							}
						});
						}
						})
		
				}
	

	
</script>
<template>
	<view class="fixedTop">
		<view class="navbar" :style="setBackGround(state.detailsData.background)" >
			<u-navbar :placeholder="true" leftText="" title="" bgColor="rgba(0,0,0,0)" auto-back>
				<template #left>
					<view class="" @click="back">
						<u-icon name="arrow-left" size="22"></u-icon>
					</view>
				</template>
				<template #right v-if="pageType == 'edit'">
					<view class="subBtn" @click="editFun">
						编辑
					</view>
				</template>
			</u-navbar>
			<view class="navCon">
				<image :src="state.detailsData.logo" mode=""></image>
				<text>{{state.detailsData.name}}</text>
			</view>
		</view>
		<view class="cTabs" v-if="pageType != 'edit'">
			<u-tabs :list="tabsList" :activeStyle="{
				fontSize:'32rpx',
			    color: '#CB645E',
			    fontWeight: 'bold',
			}" :inactiveStyle="{
			    color: '#000',
				fontSize:'32rpx',
			}" lineColor="#CB645E" @click="clickTabs"></u-tabs>
			
			<!-- <u-tabs :list="tabsList" :activeStyle="{
				width:'224rpx',
				height:'40rpx',
				color: '#CB645E',
				textAlign:'center',
				fontWeight: 'bold',
				transform: 'scale(1)'
			}" :inactiveStyle="{
				width:'224rpx',
				height:'40rpx',
				textAlign:'center',
				color: '#333333',
				transform: 'scale(1)'
			}" lineWidth="60rpx" lineColor="#CB645E" @click="clickTabs"></u-tabs> -->
		</view>
	</view>
	<view class="companyAbout" v-if="tabName=='关于'" >
		<view class="ca1 card">
			<view class="ca1Tit">
				公司介绍
			</view>
			<view class="ca1Con" v-if="con">
				<u-read-more showHeight="150" :toggle="true">
					<rich-text :nodes="con"></rich-text>
				</u-read-more>
			</view>
		</view>
		<view class="ca2 card">
			<view class="ca2Top">
				<view class="ca2Tit">工商信息</view>
			<!-- 	<view @click="cutBtn" class="cutbox">
					<text class="title">全部</text>
					<u-icon name="arrow-up" v-if="showOther"></u-icon>
					<u-icon name="arrow-down" v-else></u-icon>
				</view> -->
			</view>
			
			<view class="ca2Con">
				<view class="ccItem1" @click="chooseLocation" style="height: auto;">
					
					<text>公司地址</text>
<!-- 					{{state.detailsData.longitude}}
					{{state.detailsData.latitude}} -->
					<view class="da2"> <div style="width: 100%;">
						<map  style="width: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers"></map></div>
			
					</view>
					<view class="da3">
						{{state.detailsData.address}}
					</view>
			
<!-- 					<view class="cci">
						<u-icon name="map"></u-icon>
						<text>{{state.detailsData.address}}</text>
					</view> -->
				</view>
				<view class="ccItem">
					<text>公司全称</text>
					<view class="cci">
						<text>{{state.detailsData.companyName}}</text>
					</view>
				</view>
				<view class="ccItem">
					<text>法定代表人</text>
					<view class="cci">
						<text>{{state.detailsData.compnayHead}}</text>
					</view>
				</view>
				<view class="ccItem">
					<text>注册资本</text>
					<view class="cci">
						<text>{{state.detailsData.capital}}</text>
					</view>
				</view>
				<view class="ccItem">
					<text>信用代码</text>
					<view class="cci">
						<text>{{state.detailsData.number}}</text>	
					</view>
				</view>
				<view class="ccItem">
					<text>成立时间</text>
					<view class="cci">
						<text>{{state.detailsData.setTime}}</text>
					</view>
				</view>
				<view class="ccItem">
					<text>经营状态</text>
					<view class="cci">
						<text>{{state.detailsData.isOpen}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="jobBox" v-if="tabName=='职位'">
		<job-card :list="state.list" :showcompnay="false"></job-card>
	</view>
</template>

<style lang="scss" scoped>
	page{
		background:#f6f6f6;
	}
	.fixedTop{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height:720rpx;
		z-index:10;
		background:#f6f6f6;
	}
	.navbar {
		width: 100%;
		height: 600rpx;
		// background-image: url('../../../static/logo.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.navCon {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 200rpx;
			flex-direction: column;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 100rpx;
				background-color: #000;
			}

			text {
				font-weight: 700;
				margin-top: 20rpx;
			}
		}
	}

	.cTabs {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		background:#f6f6f6;
	}

	.companyAbout {
		margin-top:730rpx;
		padding: 0 30rpx;

		.ca1 {
			margin-top: 30rpx;

			.ca1Tit {
				margin-bottom: 20rpx;
				font-size: 34rpx;
				font-weight: 700;
			}

			.ca1Con {}
		}

		.ca2 {
			margin-top: 20rpx;
			margin-bottom:40rpx;
			
			.ca2Top{
				display:flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				.cutbox{
					display:flex;
					justify-content: space-between;
					align-items: center;
					.title{
						padding-right:10rpx;
					}
				}
				.ca2Tit {
					font-size: 34rpx;
					font-weight: 700;
				}
				
			}
			
			.ca2Con {
				padding: 0 20rpx;
				.ccItem1 {
					width: 100%;
					
					// height: 120rpx;
					border-bottom: 1rpx solid #d6dae3;
					margin: 20rpx 0;
					text{
						color:#000000D9;
						display:inline-block;
						padding-bottom:10px;
					}
					.da3{
						color:#00000073;
					}
					// .cci {
					// 	display: flex;
					// 	justify-content: flex-start;
					// 	align-items: center;
					// 	margin-top: 10rpx;
					// }
				}
				.ccItem {
					width: 100%;
					// height: 120rpx;
					// border-bottom: 1rpx solid #d6dae3;
					margin: 40rpx 0;
					display:flex;
					align-items: center;
					text{
						color:#000000D9;
						display:inline-block;
						width:200rpx;
					}

					.cci {
						flex:1;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-top: 10rpx;
						text{
							display:inline-block;
							width:100%;
							color:#00000073;
							text-align: right;
						}
					}
				}
			}
		}
	}
	
	.card{
		background:#fff;
		box-sizing: border-box;
		border: 2rpx solid #fff;
		margin: 30rpx auto;
		padding: 24rpx;
		background:#fff;
		border-radius: 24rpx;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
	}
	
	.jobBox{
		margin-top:730rpx;
	}
</style>